<template>
    <van-pull-refresh v-model="isLoading" @refresh="requestData">
        <!-- 顶部【LOGO+定位+searchbar】 -->
        <div class="search-bar">
            <van-row class="top">
                <van-col span="12" class="logo">首页</van-col>
                <van-col span="12" class="location">
                    <img :src="locationIcon" alt="location" width="100%">
                </van-col>
            </van-row>
            <van-row class="search">
                <van-col span="24">
                    <van-search 
                        placeholder="请输入搜索关键词" 
                        v-model="value" 
                        shape="round"
                        class="search-input"
                        @click="gotoSearch"/>
                </van-col>
            </van-row>
        </div>
        <!-- swiper area -->
        <div class="swiper-area">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(img, index) in bannerPicArray" :key="index">
                    <img v-lazy="img.image" width="100%" @click="gotoGoodsDetail(img.goodsId)" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- type bar -->
        <div class="type-bar">
            <div @click="gotoCategoryList(index, cate.mallCategoryId)" v-for="(cate, index) in category" :key="index">
                <img v-lazy="cate.image" width="90%">
                <span>{{cate.mallCategoryName}}</span>
            </div>
        </div>
        <!-- adbanner area -->
        <div class="ad-area">
            <img v-lazy="adBanner" width="100%">
        </div>
        <!-- Recommend goods area -->
        <div class="recommend-area">
            <sub-title-component :swTitleObj="{title: '商品推荐', route: {}}"></sub-title-component>
            <!-- 横向滚动推荐 -->
            <van-row class="recommend-body">
                <swiper :options="swiperOption">
                    <swiper-slide v-for="(item, index) in recommendGoods" :key="index">
                        <div class="recomment-item" @click="gotoGoodsDetail(item.goodsId)">
                            <img :src="item.image" width="80%">
                            <p>{{ item.goodsName | stringFilter(7) }}</p>
                            <p>¥{{item.price | moneyFilter}}(¥{{item.mallPrice | moneyFilter}})</p>
                        </div>
                    </swiper-slide>
                </swiper>
            </van-row>
        </div>
        <!-- 楼层推荐 -->
        <div class="floor-area">
            <floor-component :goodsList="floor1" 
                :swTitleObj="{title: floorName.floor1, route: {}}" @gotoDetail="gotoGoodsDetail"></floor-component>
            <floor-component :goodsList="floor2" 
                :swTitleObj="{title: floorName.floor2, route: {}}" @gotoDetail="gotoGoodsDetail"></floor-component>
            <floor-component :goodsList="floor3" 
                :swTitleObj="{title: floorName.floor3, route: {}}" @gotoDetail="gotoGoodsDetail"></floor-component>
        </div>
        <!--Hot Area-->
        <div class="hot-area">
            <sub-title-component :swTitleObj="{title: '热卖商品', route: {}}"></sub-title-component>
            <div class="hot-goods">
                <!--这里需要一个list组件-->
                <van-list>
                    <!-- gutter:每列之间的空隙 -->
                    <van-row gutter="20">
                        <van-col span="12" v-for="(item, index) in hotGoods" :key="index">
                            <goods-info-component
                                :goodsImage="item.image" 
                                :goodsName="item.name" 
                                :goodsPrice="item.price"
                                :goodsId="item.goodsId">
                            </goods-info-component>
                        </van-col>
                    </van-row>
                </van-list>
            </div>
        </div>
    </van-pull-refresh>
</template>

<script>
import '../../../static/css/base.css';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import subTitleComponent from '../component/subTitleComponent';
import floorComponent from '../component/floorComponent';
import goodsInfoComponent from '../component/goodsInfoComponent'
import URL from '@/ServiceAPI.config.js';
import storage from '@/utils/storage.js';

export default {
    data() {
        return {
            value: '',
            locationIcon: require("../../assets/images/location.png"),
            bannerPicArray: [],
            category: [],
            adBanner: '', // 广告栏
            recommendGoods: [], // 商品推荐
            swiperOption: {
                slidesPerView: 3 // 横向滚动三个一组(一屏)
            },
            floor1: [], // 分类楼层
            floor2: [],
            floor3: [],
            floorName: {},
            hotGoods: [], //热门商品
            isLoading: false // 是否处于刷新状态
        }
    },
    created() {
        this.requestData();
        this.getCategoryAndSub();
    },
    methods: {
        onSearch() {
            console.log("点击了搜索");
        },
        // 获取首页数据
        requestData() {
            this.$ajax({
                url: URL.getShoppingMallInfo,
                method: 'get',
            }).then(res => {
                console.log(res);
                if (res.status === 200) {
                    let { category, advertesPicture, slides, recommend, floor1, floor2, floor3, floorName, hotGoods } = res.data.data;
                    this.category = category;
                    this.adBanner = advertesPicture.PICTURE_ADDRESS;
                    this.bannerPicArray = slides;
                    this.recommendGoods = recommend;
                    this.floor1 = floor1;
                    this.floor2 = floor2;
                    this.floor3 = floor3;
                    this.floorName = floorName;
                    this.hotGoods = hotGoods;
                    // 将一级分类和二级分类存储到本地
                    if (storage.get("cate").length <= 0) {
                        storage.set("cate", category);
                        storage.get("cate");
                    }
                }
                this.isLoading = false;
            }).catch(err => {
                console.log(err);
                this.isLoading = false;
            });
        },
        // 一次性获取一二级商品分类
        getCategoryAndSub() {
            let category = storage.get("category");
            let subCategory = storage.get("subCategory");
            // 如果本地没有分类则请求分类
            if (category.length <=0 || subCategory.length <= 0) {
                this.$ajax.all([
                    this.$ajax.get(URL.getCategoryList),
                    this.$ajax.get(URL.getSubCategoryList)
                ])
                .then(this.$ajax.spread((cate, subCate) => {
                    category = cate.data.data;
                    subCategory = subCate.data.data;
                    // 存储 一级分类 和 二级分类 到 localStorage
                    storage.set("category", category);
                    storage.set("subCategory", subCategory);
                }))
                .catch(err => {
                    Toast.fail("获取分类失败");
                });
            }
        },
        // 前往商品列表页
        gotoCategoryList(index, cateid) {
            this.$router.push({name: 'CategoryList', params: {index: index, categoryId: cateid}})
        },
        // 前往商品详情页
        gotoGoodsDetail(id) {
            this.$router.push({name: 'Goods', params:{goodsId: id}});
        },
        // 前往搜索页
        gotoSearch() {
            console.log("1233");
            this.$router.push({name: 'SearchMain'});
        }
    },
    components: {
        swiper,
        swiperSlide,
        subTitleComponent,
        floorComponent,
        goodsInfoComponent
    }
}
</script>

<style scoped lang="scss">
// 顶部
.search-bar {
    height: 5.2rem;
    background-color: #fff;
    .top {
        height: 2.2em;
        line-height: 2.2em;
        padding: .5rem 1rem 0 1rem;

        .logo {
            font-size: 1.5em;
            vertical-align: bottom;
        }

        .location {
            text-align: right;
            img {
                width: 1.2rem;
                vertical-align: middle;
            }
        }
    }
    .search {
        .van-search {
            padding: 10px;
        }
    }
}
// banner
.swiper-area {
    margin: 10px;
    border-radius: .25rem;
    overflow: hidden;
    box-shadow: 0px 5px 5px 1px rgba(97, 112, 124, 0.1);

    .van-swipe {
        width: 100% !important;
        height: 8rem;
        // 图片高度123，比上20，等于6.15
    }
}
// type bar
.type-bar {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 10px;
    div {
        flex: 1;
        text-align: center;
        margin: .3rem;
        img {
            margin-bottom: 5px;
        }
    }
}
// adbanner area
.ad-area {
    margin: 0 10px;
}
// recommend goods area
.recommend-area {
    margin: 10px;

    .recommend-body {
        padding: 5px 0;

        .recomment-item {
            width: 99%;
            font-size: 12px;
            text-align: center;

            p {
                margin: 0;
                line-height: 1rem;
            }
            p:first-of-type {
                margin-top: 5px;
            }
        }
    }
    // .recommend-floor的样式封装到了组件 floorComponent
}
// floor area
.floor-area {
    margin: 10px;
}
// hot area
.hot-area {
    margin: 10px;
    font-size: 14px;
    line-height: 1.8rem;
    .hot-goods {
        margin-bottom: 50px;
    }
}
</style>